import React from 'react'
import {Result, Icon, Tabs, Toast} from "antd-mobile";
import {withRouter, RouteComponentProps} from 'react-router-dom';

import styles from './index.module.css'
import cart1 from "../../assets/cart1.jpg";

import Btn from '../../components/btn'

import Nav from '../../components/nav'
import request from "../../utils/request";


const tabs = [
    {title: '待付款', status: 1},
    {title: '待发货', status: 2},
    {title: '待收货', status: 3},
    {title: '评价', status: 4},
    {title: '退款/售后', status: 5},
];

const Sku: React.FC<{ skuItem: orderSku ,history:any}> = ({skuItem,history}) => {

    return (
        <div className={styles.cardBody} onClick={() => {
            history.push('/orders/1');
        }}>
            <img src={cart1} alt="" style={{borderRadius: '8px'}}/>
            <div style={{
                padding: '2px 0 2px 10px',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-around',
                // marginLeft:'10px'
            }}>
                <b>{skuItem.productName}</b>
                <span>淡青色</span>
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                }}>
                    <b style={{marginRight: '10px'}}>¥{skuItem.skuPrice}</b>
                </div>
            </div>
        </div>
    );
};

const Card: React.FC<{ order: order, history: any }> = ({history, order}) => {
    return (
        <div className={styles.card}>

            <div className={styles.cardTitle}>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                }}><i className={"iconfont icon-shop"} style={{fontSize: '24px'}}/>卧槽商城
                </div>
                <span style={{
                    fontWeight: 600
                }}>待付款</span>
            </div>

            {
                order.orderSkuList.map((sku, index) => {
                    return <Sku skuItem={sku} key={index} history={history}/>
                })
            }

            <div className={styles.cardFoot}>
                <div>合计{order.payAmount}</div>
                <Btn val={"取消订单"} style={{
                    color: 'black',
                    backgroundColor: 'white',
                    border: '1px solid black'
                }}/>
                <Btn val={"评分"} onClick={() => {
                    history.push('/order/evaluate');
                }}/>
            </div>
        </div>
    );
};


interface Props extends RouteComponentProps {

}

interface orderSku {
    id: number,
    productName: string,
    skuName: string,
    skuPrice: number,
    skuNum: number,
}

interface order {
    id: number,
    orderNo: string,
    payAmount: number,
    couponAmount: number,
    orderSkuList: orderSku[],
    status: number,
}

interface States {
    orderList: order[]
}

class Index extends React.Component<Props, States> {
    state: States = {
        orderList: []
    };

    requestOrderList = (status: number) => {
        request(`/orders/?status=${status}`).then((result) => {
            const {orderList} = result.data;
            console.log("orderList");
            console.log(orderList);
            this.setState({orderList})
        }).catch(() => {
            Toast.fail('异步请求失败')
        });
    };

    componentDidMount() {
        this.requestOrderList(1)
    }

    renderList = (history: any) => {

        if (this.state.orderList.length < 1) {
            return <Result
                img={<Icon type="check-circle" className="spe" style={{fill: '#1F90E6'}}/>}
                title="无数据"
                message="就是没有数据"
            />
        }
        return (<div>
            {
                this.state.orderList.map((item, inx) => {
                    return <Card key={inx} order={item} history={history}/>
                })
            }

        </div>);
    };

    render() {
        const {history} = this.props;
        return (
            <div style={{backgroundColor: 'white'}}>
                <Nav title={"我的订单"}/>

                <Tabs tabs={tabs}
                      initialPage={0}
                      prerenderingSiblingsNumber={0}
                      onChange={(tab, index) => {
                          this.requestOrderList(tab.status)
                      }}
                      onTabClick={(tab, index) => {
                          // console.log('onTabClick', index, tab);
                      }}
                >

                    {
                        () => {
                            return this.renderList(history);
                        }
                    }

                </Tabs>
            </div>
        );
    }
}


export default withRouter(Index)
